<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
</head>
<body>
<div id="app">
    <form class="layui-form" action="">
        <div class="layui-form-item" style="width:50%;">
            <span>你选择了：{{selected}}</span>
            <hr>
            <div class="layui-input-block">
                <select name="city" v-model="selected" lay-verify="required">
                    <option value="">请选择一个商家</option>
                    <option v-for="x in options" :value="x.value">{{x.label}}</option>
                </select>
            </div>
        </div>
    </form>
</div>
<script src="./layui/layui.js"></script>
<script src="./js/vue.min.js"></script>
<!-- <script src="vue-resource.js"></script> -->
<script>
// layui.use('form', function(){
//   var form = layui.form;
//   form.on('select(aihao)',function(data){
//     console.log(data);
//     console.log(data.elem); //得到select原始DOM对象
//     console.log(data.value); //得到被选中的值
//     console.log(data.othis); //得到美化后的DOM对象
//   });
// });
</script>
<script>
var App = new Vue({
    el: '#app',
    data: {
        selected: 2,
        options: [],
    },
    mounted: function() {
        this.getMakerList();
    },
    methods: {
        getMakerList: function(e) {
            let that = this;
            that.options = [
                {label: '写作',value: 1},
                {label: '阅读',value: 2},
                {label: '听歌',value: 3},
                {label: '游戏',value: 4},
            ];
            that.$nextTick(function() {
                layui.use('form',
                function() {
                    var form = layui.form;
                    form.on('select',
                    function(data) {
                        that.selected = data.value;
                        console.log(data.value); //得到被选中的值
                    });
                });
            });
        },
    }
})
</script>
</body>
</html>